feat: use fumadocs for website #1654
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
* Added home and about pages * docs: Examples, footer, and remaining pages (#1784) * Added examples card grid and fixed demo styling * Added footer + remaining pages, cleaned up files * Removed unused Logo component * - Fixed home page contributors GH/Discord icons - Fixed CSS file imports - Removed codeblock/tabs from generated example MDX files (now handled by the `Example` component) - Fixed component imports in MDX - Refactored `Example` component - Various styling fixes - Added `meta.json` generation * Fixed pro examples + minor changes/fixes * Small fix * Small fix * Removed `console.log` * Added missing examples pages to meta * Small fix * Fixed build * Updated package lock * Updated lockfile * Fixed example path in playground * Implemented PR feedback * Updated page headings
There was a problem hiding this comment.
Nice! Not really a lot of questions about the code - so focused on testing the design / different pages.
Generic:
font is off (I don't think inter is used on current site)examples github link doesn't workgetting errors on pages like http://localhost:3002/docs/ui-components/formatting-toolbar
AI:
Do we need to merge in changes from main?
AI button doesn't show in headerAI preview banner has been removed (maybe need to merge in updates from main)
Navbar:
examples / docs aren't highlighted in navigation when that page is activecan we make the navigation more consistent between docs and main pages?remove light / dark toggle from nav (keep in footer like existing site)
Other:
Let's walk through the pages together and manually compare them (maybe on a call), with specific attention to dark + light, responsive, etc. We can then see together what we do / do not want to fix. Some things I already noticed (outside of the above):
dark mode sign in / sign up page looks a lot different
fumadocs/app/api/og/route.tsx
Outdated
|
|
||
| export const runtime = "edge"; | ||
|
|
||
| export async function GET(request: Request) { |
There was a problem hiding this comment.
TODO: make sure we test this when deployed
fumadocs/app/(home)/page.tsx
Outdated
| import { Hero } from "./hero/Hero"; | ||
| import { Letter } from "./letter/Letter"; | ||
|
|
||
| export default function Home() { |
There was a problem hiding this comment.
why is this directory named (home)? Is this a route group? https://nextjs.org/docs/app/api-reference/file-conventions/route-groups ? Should it be? (as it's a single page, right?)
There was a problem hiding this comment.
I agree it's a little odd, but seems like it's the recommended setup for fumadocs since that's what they use for their site (https://github.com/fuma-nama/fumadocs/tree/dev/apps/docs/app/(home)). Either way, I'm pretty sure it's because you don't wanna render a HomeLayout in your root route layout (i.e. /app/layout.tsx) since that'll get inherited by all other routes. So while it's weird that it's in a route group, this seems to be the correct approach for fumadocs.
fumadocs/app/pages/layout.tsx
Outdated
| import { baseOptions } from "@/app/layout.config"; | ||
| import { Footer } from "@/components/Footer"; | ||
|
|
||
| export default function Layout({ children }: { children: ReactNode }) { |
There was a problem hiding this comment.
trying to understand the setup, for which pages is this layout file used?
There was a problem hiding this comment.
The app/docs, app/examples, and app/pages routes correspond to the content/docs, content/examples, and content/pages directories. So the layout for app/pages is used for the about, thanks, and legal pages that we define in MDX in content/pages.
| ), | ||
| title: "Documentation", | ||
| description: "Learn how to use BlockNote", | ||
| url: "/docs", | ||
| props: { | ||
| className: "fesfesfes", |
|
|
||
| export const metadata: Metadata = { | ||
| title: "Create Next App", | ||
| description: "Generated by create next app", | ||
| title: "BlockNote", |
There was a problem hiding this comment.
please use same that we currently have (title and description)
(view-source:https://www.blocknotejs.org/)
There was a problem hiding this comment.
- the video on the AI page doesn't work
- examples open in a new window
- examples return 404
- examples don't show in sidebar
- sign in page in dark mode shows a different logo font color compared to nav. Maybe remove that one altogether?
- heading and page title here should be "introduction to blocknote". Are we losing info somewhere?
- github links are broken (duplicate /examples)
- I think we're missing some
metahtml tags compared to the current website, especially on docs pages (like og:image). Can you compare the current website vs the fumadocs version? - I can't scroll the sidebar separately from the content if it's height exceeds the viewport height
| @@ -0,0 +1,64 @@ | |||
| --- | |||
| title: Schemas | |||
There was a problem hiding this comment.
probably forgot to update the frontmatter
| imageTitle: Manipulating Content | ||
| --- | ||
|
|
||
| Schemas are the core of how BlockNote works. They basic building blocks of the editor, and are used to define the content of the editor. |
There was a problem hiding this comment.
second sentence is broken
|
|
||
| You can create a schema using the `BlockNoteSchema.create` function. | ||
|
|
||
| ```tsx twoslash |
There was a problem hiding this comment.
The twoslash stuff is cool, but I think in this case the info it adds on hover is not very useful, because it complete expands the types of things like defaultBlockSpecs which is pretty convoluted
|
|
||
| return <BlockNoteView editor={editor} />; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
what do you think about linking to the custom schemas page from this page?
| Blocks can be: | ||
|
|
||
| - **Top-level blocks** - Direct children of the document | ||
| - **Nested blocks** - Children of other blocks (like list items within a list) |
There was a problem hiding this comment.
list items within a list are not nested. Better examples are:
- nested list items
- indented blocks (which are considered "nested" in another block)
| - Via the [`@blocknote/xl-email-exporter` package](/docs/features/export/email) | ||
|
|
||
| ## Migrating Between Editors |
There was a problem hiding this comment.
From here and below is cool, but I'm not sure it should be part of "foundations"
|
|
||
| ## Explore | ||
|
|
||
| <CardTable path="features/blocks" /> |
There was a problem hiding this comment.
this doesn't show up for me in the preview
| description: Learn how to localize BlockNote to support multiple languages and customize text strings | ||
| --- | ||
|
|
||
| # Localization (i18n) |
| @@ -5,12 +5,12 @@ imageTitle: UI Components | |||
| path: /docs/ui-components | |||
| --- | |||
|
|
|||
| # Changing UI Components | |||
There was a problem hiding this comment.
I would move the UI components one level up and put it before "styling & theming". Main reasons:
- extra levels of nesting make things more difficult to find
- customizing things like slash menu, toolbars are some of the most common scenarios
- the other topic in react (styling & theming) needs quite some improvements (both code wise and docs)
| } | ||
| ``` | ||
|
|
||
| ## Practical Examples |
There was a problem hiding this comment.
I'm not sure about adding examples to the reference. Reasons:
- From a reference I expect it to be like sort of a real world dictionary, e.g.: function / type reference without many extras
- we already have a system for examples. This will introduce more maintenance. We could link to existing examples, or if the current examples don't suffice, add new ones / change them
This PR implements a new docs site, based on fumadocs.
I purposefully did not just update the existing docs site, so that we can compare the changes, and remove any cruft that may be left over.
So far, I've done the following:
What's left: